<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
            crossorigin="anonymous"></script>
<title>点名器</title>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% "Microsoft YaHei","微软雅黑", "宋体";}

#bodybj{background:url(img/images.jpg) no-repeat center top;}
#box{margin:auto;width:660px;font-size:66px;height:94px;line-height:94px;overflow:hidden;color:#138eee;text-align:center;padding:0 30px;margin-top:200px;}
#bt{margin:auto;width:200px;text-align:center;margin-top:75px;color:#fff;font-size:25px;line-height:28px;cursor:pointer;}
</style>

<script type="text/javascript">
var namelist=["张三","李四","王五","贺六","孙九","赵十","刘一"];

var mytime=null;

function doit(){
	var bt=window.document.getElementById("bt");
	if(mytime==null){
		bt.innerHTML="停止点名";
		show();                    
	}else{
		bt.innerHTML="开始点名";
		clearTimeout(mytime);
		mytime=null;                    
	}
}

function show(){
	var box=window.document.getElementById("box");
	var num=Math.floor((Math.random()*100000))%namelist.length;
	box.innerHTML=namelist[num];
	mytime=setTimeout("show()",10);
} 
</script>
</head>
<body id="bodybj">

<div id="box">亲，准备好点名了吗？</div>
<div id="bt" onClick="doit()">开始点名</div>

</body>
</html>